<!-- 组建使前端代码能够轻松复用。
  组建文件放在`components`目录下。
  组建文件以`.vue`为文件扩展名。
  组建文件包含3部分，`<template>`包含了html模板，`<script>`包含了js代码，`<stype>`包含样式。
 -->
<template>
  <div>
    {{ msg }}
  </div>
  <!-- `template`标签里只能包含一个子标签。这个子标签可以包含任意孙子标签。-->
</template>

<script>
/* 组建写法：
export default { 组建属性... }
 */
export default {
  name: 'HelloWorld',
  // 最简单地，`data`可以是一个对象，这个对象的每一个属性是我们关心的变量。
  // 但是`data`最好定义为返回这个对象的方法，这样能提供初始化代码，更灵活。
  // `data(){}`是`data: function () {}`的简写。
  data () {
    return {
      msg: 'Hello World'
    }
  }
}
</script>

<!-- <style>包含样式。默认情况下，一个组建里的样式对其他组建是可见的。添加`scoped`属性后，样式对其他组建是不可见的。除了顶层模板，推荐使用`scoped`限制样式对其他组建的影响。-->
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
